<template>
  <div class="mindWidth">
    <div class="table_tab" v-show="dialogVisible || softWorkData.length">
      <div class="table_hd">
        <div class="name">名称</div>
        <div class="register_num">登记号</div>
        <div class="category_num">分类号</div>
        <div class="versions">版本</div>
        <div class="ratify_date">登记批准日期</div>
      </div>
      <div class="table_bd" v-for="(item, index) in softWorkData" :key="index">
        <div class="name_content singlerows">{{ item.softName }}</div>
        <div class="register_num_content">{{ item.registrationNumber }}</div>
        <div class="category_num_content">{{ item.sortNumber }}</div>
        <div class="versions_content">{{ item.version }}</div>
        <div class="ratify_date_content">{{ item.successTime }}</div>
      </div>
    </div>
    <!-- 没有数据 -->
    <div class="table_bd_item" v-show="isLogin || dialogVisible || !softWorkData.length">
      <!-- 没有登录 -->
      <div class="noData" v-if="isLogin">
        <img src="../../static/image/noData.png" alt />
        您尚未登录
        <a @click="toLogin" style="font-weight: 600">立即登录</a>查看更多
      </div>
      <!-- 查询次数上限 -->
      <div class="noQueryData" v-else-if="dialogVisible">
        您的查询次数已满
        <a @click="toVIPPage">立即开通</a>会员
      </div>
      <div class="noData" v-else-if="!softWorkData.length && !isLogin">暂无数据</div>
    </div>
    <div class="pageList">
      <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" />
    </div>
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
  </div>
</template>

<script>
import paging from "../../components/paging.vue";
import { commonRequest } from "../../api/api.js";
import loginDialog from "../../components/login_item/LoginDialog";
export default {
  name: "soft", // 软著区域
  components: {
    paging,
    loginDialog
  },
  data() {
    return {
      softWorkData: "",
      pages: 1,
      dialogVisible: false, // 是否显示查询已满登录框
      isLogin: false, // 提示登录
      id: this.$route.query.id || this.$route.params.id
    };
  },
  mounted() {
    this.dataQq();
  },
  methods: {
    toLogin() {
      this.$refs.login.open();
    },
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    accept_CurrentValue: function(value) {
      this.pages = value;
      this.dataQq();
    },
    dataQq() {
      let token = localStorage.getItem("saasToken");
      if (!token) {
        this.isLogin = true;
        return;
      }
      commonRequest("/api/cms/cmsSoft/list", {
        id: this.id,
        pageNo: this.pages || 1
      }).then(res => {
        if (res.code === 10001) {
          this.isLogin = true;
        } else if (res.code == 10005) {
          this.dialogVisible = true;
        } else {
          this.softWorkData = res.records || [];
          this.$refs.paging_zi.totalValue(res.total || 0);
        }
      });
    },
    // 去升级vip页
    toVIPPage() {
      window.open("/pageVIP", "_balnk");
    }
  }
};
</script>

<style lang="less" scoped>
.table_bd_item {
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;

  a {
    color: #44a2ff;
  }
}

.table_tab {
  border: 1px solid #ccc;
  border-bottom: none;
  background-color: #fff;

  .table_hd {
    display: flex;
    align-items: center;
    height: 50px;

    div {
      display: flex;
      align-items: center;
      height: 100%;
      padding-left: 10px;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
    }

    .name {
      width: 420px;
      border-right: 1px solid #ccc;
    }

    .register_num {
      width: 240px;
      border-right: 1px solid #ccc;
    }

    .category_num {
      width: 180px;
      border-right: 1px solid #ccc;
    }

    .versions {
      width: 160px;
      border-right: 1px solid #ccc;
    }

    .ratify_date {
      width: 200px;
      border-right: 1px solid #ccc;
    }
  }

  .table_bd {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #ccc;

    div {
      font-size: 14px;
      height: 100%;
      display: flex;
      align-items: center;
    }

    .name_content {
      padding-left: 10px;
      width: 420px;
      display: flex;
      align-items: center;
      border-right: 1px solid #ccc;
    }

    .register_num_content {
      width: 240px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .category_num_content {
      width: 180px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .versions_content {
      width: 160px;
      border-right: 1px solid #ccc;
      padding-left: 10px;
    }

    .ratify_date_content {
      width: 200px;
      padding-left: 10px;
    }
  }
}

.pageList {
  height: 100px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
</style>
